<template>
  <div :class="cardClasses" v-bind="$attrs">
    <!-- 卡片头部 -->
    <div v-if="$slots.header || title || subtitle" class="card-header">
      <slot name="header">
        <div v-if="title || subtitle" class="space-y-1">
          <h3 v-if="title" class="card-title">{{ title }}</h3>
          <p v-if="subtitle" class="card-subtitle">{{ subtitle }}</p>
        </div>
      </slot>
      
      <!-- 头部操作区域 -->
      <div v-if="$slots.headerActions" class="card-header-actions">
        <slot name="headerActions" />
      </div>
    </div>

    <!-- 卡片内容 -->
    <div v-if="$slots.default" :class="contentClasses">
      <slot />
    </div>

    <!-- 卡片底部 -->
    <div v-if="$slots.footer" class="card-footer">
      <slot name="footer" />
    </div>

    <!-- 加载遮罩 -->
    <div v-if="loading" class="card-loading-overlay">
      <LoadingSpinner size="lg" color="primary" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import LoadingSpinner from './LoadingSpinner.vue'

export interface CardProps {
  // 基础属性
  title?: string
  subtitle?: string
  
  // 样式变体
  variant?: 'default' | 'outlined' | 'elevated' | 'filled' | 'ghost'
  size?: 'sm' | 'md' | 'lg'
  
  // 状态
  loading?: boolean
  disabled?: boolean
  hoverable?: boolean
  clickable?: boolean
  
  // 布局
  noPadding?: boolean
  divided?: boolean
}

const props = withDefaults(defineProps<CardProps>(), {
  variant: 'default',
  size: 'md',
  loading: false,
  disabled: false,
  hoverable: false,
  clickable: false,
  noPadding: false,
  divided: false,
})

const emit = defineEmits<{
  click: [event: Event]
}>()

// 基础样式
const baseClasses = 'relative rounded-md transition-all duration-300 overflow-hidden'

// 变体样式
const variantClasses = computed(() => {
  const variants = {
    default: 'bg-white dark:bg-dark-primary border border-gray-200 dark:border-gray-700 shadow-sm',
    outlined: 'bg-transparent border-2 border-gray-200 dark:border-gray-700',
    elevated: 'bg-white dark:bg-dark-primary shadow-lg hover:shadow-xl',
    filled: 'bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
    ghost: 'bg-transparent'
  }
  return variants[props.variant]
})

// 尺寸样式
const sizeClasses = computed(() => {
  if (props.noPadding) return ''
  
  const sizes = {
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-8'
  }
  return sizes[props.size]
})

// 交互样式
const interactiveClasses = computed(() => {
  const classes = []
  
  if (props.hoverable && !props.disabled) {
    classes.push('hover:shadow-md dark:hover:shadow-soft-dark hover:-translate-y-0.5')
  }
  
  if (props.clickable && !props.disabled) {
    classes.push('cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 active:transform active:scale-[0.99]')
  }
  
  if (props.disabled) {
    classes.push('opacity-50 cursor-not-allowed')
  }
  
  return classes
})

// 组合样式类
const cardClasses = computed(() => [
  baseClasses,
  variantClasses.value,
  sizeClasses.value,
  ...interactiveClasses.value
])

// 内容区域样式
const contentClasses = computed(() => {
  const classes = ['card-content']
  
  if (!props.noPadding && (props.title || props.subtitle || props.$slots.header)) {
    if (props.divided) {
      classes.push('border-t border-gray-200 dark:border-gray-700 pt-4')
    }
  }
  
  return classes
})

// 点击处理
const handleClick = (event: Event) => {
  if (!props.disabled && props.clickable) {
    emit('click', event)
  }
}
</script>

<style scoped>
.card-header {
  @apply flex items-start justify-between mb-4;
}

.card-title {
  @apply text-lg font-semibold text-gray-900 dark:text-gray-100 font-heading;
}

.card-subtitle {
  @apply text-sm text-gray-600 dark:text-gray-400;
}

.card-header-actions {
  @apply flex items-center space-x-2 ml-4 flex-shrink-0;
}

.card-content {
  @apply flex-1;
}

.card-footer {
  @apply mt-6 pt-4 border-t border-gray-200 dark:border-gray-700;
}

.card-loading-overlay {
  @apply absolute inset-0 bg-white/80 dark:bg-gray-900/80 flex items-center justify-center z-10 backdrop-blur-sm;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .card-header {
    @apply flex-col items-start space-y-2;
  }
  
  .card-header-actions {
    @apply ml-0 w-full justify-end;
  }
}
</style>
